<template>
    <el-card v-loading="loading" element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
        <template #header>
            <span>编辑大纲 </span>  
        </template>
        <el-form :model="form" ref="form" label-width="80px" :rules="rules">
            <el-form-item label="名称" prop="outline_name">
                <el-input v-model="form.outline_name"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio v-model="form.status" label="1">显示</el-radio>
                <el-radio v-model="form.status" label="0">隐藏</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save()">添加</el-button>
                <el-button @click="back()">返回</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
export default {
  props: ["id"],
  data() {
    return {
      loading: false,
      youtline:{},
      form: {
        outline_name: "",
        status: "1",
      },
      rules: {
        outline_name: [
          {required:true,message:'不能为空'},
          {
            validator: async (rule, value, cb) => {
              if(this.youtline.outline_name==value){
                cb();
                return;
              }
              const {data} = await this.axios({
                url: `/outlines/exists/outline_name/${value}`
              });
              if (data) {
                cb(new Error("名称必须唯一"));
              } else {
                cb();
              }
            }
          }
        ],
      }
    };
  },
  created(){
    this.getOutline();
  },
  methods: {
    async getOutline(){
      this.loading = true;
     const {data:{data}}= await this.axios({
        url:`/outlines/${this.id}`,
      });
      this.youtline=data;
      // console.log(data)打印出来是空的
      
      //数据回填出现bug,data里为空
      this.form.outline_name=data.outline_name;
      this.form.status=data.status;
      this.loading=false;            
    },
    async save() { 
      this.loading = true;
      this.axios({
        method: "put",
        url: `/outlines/edit/${this.id}`,
        data: {
          outline_name: this.form.outline_name,
          status: this.form.status,
        }
      });
      this.loading=false;      
      this.$message.success("修改成功");
      this.$router.push({
        name:'HomeOutlines'
      })
    },
    back() {
      this.$router.push({
        name: "HomeOutlines"
      });
    }
  }
};
</script>



